<script setup>
import { ref, reactive, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { getMenuParams, getLastdata } from '@T2/utils/params.ts';
import { useIuserInfoStore } from '@T2/store/users.ts';
import { useRoute } from 'vue-router';
import ZutaiShow from '@T2/components/zutaiShow/index.vue';
import BgImg from './framework/bgImg.vue';
import Simplicity from './framework/simplicity.vue';
import SideData from './framework/sideData.vue';
import Map from './framework/map.vue';

const route = useRoute();
const iuserInfoStore = useIuserInfoStore();
const { info, getHandleRight } = iuserInfoStore;
const RIGHT = getHandleRight(['395']);

const Rt = reactive({
  sensors: [],
  others: [],
});
onMounted(async () => {
  const { sensors, zts } = await getMenuParams(route.path);
  
  if (!sensors?.length) {
    ElMessage.error('未配置参数！');
    return;
  }
  const { curIds, diffIds } = await getLastdata(sensors);
  Rt.sensors = sensors;
  
  Rt.others = zts || [];
});

/* 底部切换 */
const tabRt = reactive({
  isBgImg: true,
  showSimplicity: false,
  showCoords: true,
  backOri: 0,
});


const isBgImgClick = () => {
  tabRt.isBgImg = !tabRt.isBgImg;
}

const zutai = reactive({
  show: false,
  id: null,
});
const ztChange = (v) => {
  zutai.show = true;
  zutai.id = v;
}
</script>

<template>
  <div class="view">
    <BgImg
      v-if="tabRt.isBgImg && Rt.others.length"
      :showCoords="tabRt.showCoords"
      :others="Rt.others"
      @zt-change="ztChange"
    />
    
    <Map @zt-change="ztChange" :backOri="tabRt.backOri" v-else-if="!tabRt.isBgImg" />
    
    <div class="zutaiBox" v-if="zutai.show">
      <ZutaiShow :dftPage="zutai.id" :disabled="!RIGHT['395']" />
      <img :src="require('./assets/zt_close.png')" @click="zutai.show = false" />
    </div>
    
    <SideData :sensors="Rt.sensors" v-if="Rt.sensors.length"/>
    
    <div class="tabLine" >
      <img
        :src="tabRt.isBgImg ? require('./assets/tab_isBg.png') : require('./assets/tab_map.png')"
        @click="isBgImgClick()"
      />
      <img
        :src="tabRt.showCoords ? require('./assets/tab_coords_isActive.png') : require('./assets/tab_coords.png')"
        @click="tabRt.showCoords = !tabRt.showCoords"
        v-if="tabRt.isBgImg"
      />
      <img
        :src="require('./assets/tab_backOri.png')"
        @click="tabRt.backOri ++"
        v-else
      />
      <img
        :src="require('./assets/tab_simplicity.png')"
        @click="tabRt.showSimplicity = !tabRt.showSimplicity"
      />
    </div>
  </div>
  
  <Simplicity @closeSimp="tabRt.showSimplicity = false" v-if="tabRt.showSimplicity" />
</template>

<style lang="scss" scoped>
.view {
  width: 100%;
  height: 100%;
}
.zutaiBox {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 100;
  img {
    width: 38px;
    height: 38px;
    cursor: pointer;
    position: absolute;
    right: 10px;
    top: 5px;
  }
}
.tabLine {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  z-index: 100;
  background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.9) 54%, rgba(0,0,0,0) 100%);
  padding: 9px 160px;
  border-radius: 40px 40px 0 0;
  img {
    width: 18px;
    height: 18px;
    cursor: pointer;
    margin: 0 14px;
  }
}
</style>